<template>
  <div class="main">
    <div class="meet-info">
      <div class="info">
        <div :style="{backgroundImage: `url(${meetingInfo.coverImg})`}" class="cover"></div>
        <div class="title-price">
          <p class="title">{{meetingInfo.ticketType ? '收费': '免费'}}报名</p>
          <p class="price">{{meetingInfo.ticketType ? '收费': '免费'}}</p>
        </div>
      </div>
      <!-- <div class="buy-num">
        <label>数量</label>
        <div class="cartbutton">
          <a @click="handlePull()" class="button pull disable">-</a>
          <span class="cartext">1</span>
          <a @click="handlePush()" class="button push">+</a>
        </div>
      </div> -->
    </div>
    <div class="participants">
      <div class="title-more">
        <span class="header-title">自己参会</span>
        <van-checkbox
          v-model="checked"
          shape="square"
          checked-color="#3DB5FF"
          icon-size="18px"></van-checkbox>
      </div>
      <div class="info">
        <p class="title">订单提交后会优先给您分配一张票</p>
        <ul class="user-info">
          <li class="info-item">
            <p class="label">姓名</p>
            <p class="text">
              <input v-model="formInfo.name" placeholder="请输入姓名" type="text">
            </p>
          </li>
          <li class="info-item">
            <p class="label">手机</p>
            <p class="text phone">
              <input v-model="formInfo.phone" placeholder="请输入手机号" type="text">
            </p>
            <!-- <p class="btn"><span class="icon"></span><span class="descript">快速认证</span></p> -->
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <p @click="handleSubmit()" class="text">确认提交</p>
    </div>
  </div>
</template>
<script>
import { Checkbox } from 'vant'
import { CheckForm } from '@/assets/js/mixin'

export default {
  name: 'ApplyConfirm',
  mixins: [CheckForm],
  components: {
    [Checkbox.name]: Checkbox
  },
  data () {
    return {
      isLoading: false,
      meetingId: this.$route.query.meetingId || '',
      meetingInfo: {},
      checked: true,
      formInfo: {
        name: '',
        phone: ''
      }
    }
  },
  methods: {
    // 获取会议详情
    fetchMeetingInfo () {
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/offline/${this.meetingId}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          let data = res.data
          if (data) {
            this.meetingInfo = data
          }
        }
      })
    },
    handleSubmit () {
      if (!this.checked) {
        return this.$toast('请勾选自己参会')
      } else if (!this.formInfo.name) {
        return this.$toast('请输入姓名')
      } else if (!this.formInfo.phone) {
        return this.$toast('请输入手机号')
      } else if (!this.checkTel(this.formInfo.phone)) {
        return this.$toast('请输入正确的手机号')
      }
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      let params = {}
      Object.assign(params, this.formInfo)
      params.operation = true
      let url = `${this.SERVICE_PORTAL}/meeting/${sessionStorage.getItem('appid')}/${sessionStorage.getItem('openid')}/${this.meetingId}/apply`
      this.$post(url, params).then(res => {
        this.isLoading = false
        if (res.code === 200) {
          this.$toast(res.message)
          this.linkTo('meetingPersonCenter')
        } else {
          this.$toast(res.message)
        }
      })
    }
  },
  created () {
    this.fetchMeetingInfo()
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  height 100vh
  background rgb(249,250,251)
  padding-bottom 50px
  position relative
  /* 公共样式 */
  .title-more
    display flex
    justify-content space-between
    box-sizing border-box
    padding 0 15px
    align-items center
    .header-title
      display block
      color #202125
      font-size 14px
      font-weight 700
      flex 1
      width 0
      line-height 20px
      padding-left 18px
      nowrap()
      background url('~assets/img/title-icon-blue.png') no-repeat left 0 center / auto 14px
    .more-title
      flex-shrink 0
      color rgba(14, 191, 178, 1)
      font-size 14px
      line-height 20px
      font-weight 700
  .meet-info
    width 100%
    padding 0 15px
    background #fff
    .info
      width 100%
      padding 15px 0
      border-bottom 1px solid #f5f5f5
      display flex
      justify-content space-between
      .cover
        width 70px
        height 70px
        background-size cover
        background-position center
        background-repeat no-repeat
        border-radius 6px
      .title-price
        width calc(100% - 80px)
        margin-left 10px
        display flex
        flex-direction column
        justify-content space-between
        .title
          max-height 42px
          line-height 21px
          font-size 17px
          color #464646
        .price
          height 21px
          line-height 21px
          font-size 15px
          color #0EBFB2
    .buy-num
      width 100%
      padding 15px 14px
      display flex
      justify-content space-between
      align-items center
      label
        height 21px
        line-height 21px
        font-size 15px
        color #464646
      /*加减*/
      .cartbutton
        width 119px
        height 32px
        display flex
        align-items center
        .button
          width 32px
          height 32px
          line-height 32px
          text-align center
          font-size 28px
          color #464646
          border 1px solid #e0e0e0
          &.disable
            color #D8D8D8
        .cartext
          width 55px
          height 32px
          line-height 32px
          text-align center
          font-size 15px
          color #464646
          border-bottom 1px solid #e0e0e0
          border-top 1px solid #e0e0e0
  .participants
    width 100%
    background #fff
    padding-top 20px
    margin-top 10px
    .info
      width 100%
      padding 0 15px
      .title
        width 100%
        height 21px
        line-height 21px
        font-size 15px
        color #464646
        padding 20px 0
      .user-info
        width 100%
        .info-item
          width 100%
          display flex
          align-items center
          padding 13px 0
          position relative
          &::before
            content '*'
            width 8px
            text-align center
            display inline-block
            font-size 17px
            color #FF4949
          .label
            width 52px
            height 24px
            line-height 24px
            font-size 17px
            color #363636
          .text
            width calc(100% - 68px)
            height 24px
            margin-left 16px
            // &.phone
            //   width calc(100% - 190px)
            input
              line-height 24px
              font-size 17px
              color #464646
          .btn
            width 110px
            height 30px
            background #3DB5FF
            line-height 30px
            text-align center
            font-size 15px
            color #fff
            border-radius 15px
            .icon
              display inline-block
              width 20px
              height 17px
              background url('~assets/img/weixin@2x.png') no-repeat center / 100%
              vertical-align middle
            .descript
              vertical-align middle
              margin-left 4px
  .footer
    width 100%
    position absolute
    left 0
    bottom 0
    .text
      width 100%
      height 50px
      background #3DB5FF
      line-height 50px
      text-align center
      font-size 17px
      color #fff
</style>
